<div class="p+">
    <lx-button ng-click="vm.openDialog()">Open dialog</lx-button>
</div>
 
<lx-dialog id="{{ vm.dialogId }}">
    <lx-dialog-header>
        <div class="toolbar bgc-primary pl++">
            <span class="toolbar__label tc-white fs-title">
                Lorem Ipsum
            </span>
 
            <div class="toolbar__right">
                <lx-button lx-size="l" lx-color="white" lx-type="icon" ng-click="vm.addPerson()">
                    <i class="mdi mdi-plus"></i>
                </lx-button>
            </div>
        </div>
 
        <lx-tabs lx-panes-id="lorem-ipsum"
                 lx-links="[{label: 'Lorem Ipsum 1'}, {label: 'Lorem Ipsum 2'}, {label: 'Lorem Ipsum 3'}]"
                 lx-layout="inline"
                 lx-theme="dark"
                 lx-color="primary"
                 lx-indicator="yellow"></lx-tabs>
    </lx-dialog-header>
 
    <lx-dialog-content>
        <lx-tabs-panes id="lorem-ipsum">
            <lx-tab-pane>
                <div class="p++">
                    <div ng-repeat="person in vm.people">
                        {{ person.name }} - {{ person.email }} - {{ person.age }}
                    </div>
                </div>
            </lx-tab-pane>
 
            <lx-tab-pane>
                <div class="p++">
                    <p>Lorem Ipsum Content 2</p>
 
                    <lx-text-field label="Description">
                        <textarea ng-model="textFields.description"></textarea>
                    </lx-text-field>
                </div>
            </lx-tab-pane>
 
            <lx-tab-pane>
                <p class="p++">Lorem Ipsum Content 3</p>
            </lx-tab-pane>
        </lx-tabs-panes>
    </lx-dialog-content>
 
    <lx-dialog-footer>
        <lx-button lx-color="black" lx-type="flat" lx-dialog-close>Cancel</lx-button>
        <lx-button lx-type="flat" lx-dialog-close>Ok</lx-button>
    </lx-dialog-footer>
</lx-dialog>
